<template>
	<div class="flex_col info_root">
		<div class="flex_row_center">
			<label>姓名:</label>
			<label>{{ props.info.empl.name }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>工号:</label>
			<label>{{ props.info.empl.account }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>是否在职:</label>
			<label>{{ (props.info.empl.active == 0) ? "是" : "否" }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>入职日期:</label>
			<label>{{ props.info.empl.date }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>部门:</label>
			<label>{{ props.info.empl.org }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>职位:</label>
			<label>{{ props.info.empl.job }}</label>
		</div>
		<div class="flex_row_center mt5">
			<label>可休假期:</label>
			<label>{{ allHoliday() }}</label>
		</div>
	</div>
</template>

<script setup lang="ts">
import type { HolidayInfo } from '@/service/api';


interface Ctx {
	info: HolidayInfo
}

const props = defineProps<Ctx>();

function allHoliday() {
	let n = 0;
	for (const info of props.info.details) {
		n += info.days;
	}
	return n;
}

</script>

<style scoped>
.info_root {
	margin: 20px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 2px #ccc;
}
</style>
